<template>
    <div>
        <h1>这是personnn组件</h1>
    </div>
    <div>
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <h2>手机号：{{ tel }}</h2>
    </div>
    <div>
        <button @click="changeName">改名</button>
        <button @click="changeAge">改年龄</button>
        <button @click="changeTel">改手机号</button>
    </div>
    <div>
        <button @click="getInfo">获取信息</button>
    </div>
    <div>
        <button @click="changeInfo">改信息</button>
    </div>
    <div>
        <button @click="count++">
            {{ count }}
        </button>
        <button @click="changeCount">
            点击次数
        </button>

    </div>
</template>
<script>
import { ref } from 'vue'
export default{
    setup(){
        let name=ref('三代张三')
        let age=ref(81)
        let tel=ref('111111111')
        let count = ref(0)
        function changeName(){
            name.value='三代李四'
        }
        function changeAge(){
            age.value=92
        }
        function changeTel(){
            tel.value='222222222'
        }
        function getInfo(){
            console.log(name.value,age.value,tel.value)
        }
        function changeInfo(){
            name.value='三代王五'
            age.value=211
            tel.value='333333333'
        }
        function changeCount(){
            count.value++
        }
        return{
            name,
            age,
            tel,
            count,
            changeName,
            changeAge,
            changeTel,
            getInfo,
            changeInfo,
            changeCount
        }
    }
}
</script>